<script lang="ts" setup name="B10Watch2">
import { ref, watch } from "vue";

const person = ref({ name: "张三", age: 18 });

const changeName = () => {
  person.value.name += "~";
};

const changeAge = () => {
  person.value.age += 1;
};

const changePerson = () => {
  person.value = { name: "李四", age: 38 };
};

watch(person, (newVal, oldVal) => {
  console.log("×「监视整个person」监测到变化：", newVal, oldVal);
});

/*
watch(person.value, (newVal, oldVal) => {
  console.log("¤「监视person.value」监测到变化：", newVal, oldVal);
});
*/

watch(
  person,
  (newVal, oldVal) => {
    console.log("＊【深度监视整个person】监测到变化：", newVal, oldVal);
  },
  {
    deep: true, // 开启深度监视
    immediate: true, // （无论数据是否发生变化）立即执行监视回调
  },
);
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">情况二：监视ref定义的对象类型数据</h1>
  <div class="my-3">
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="changeName">改名</button>
    <button class="p-1 border shadow" @click="changeAge">改年龄</button>
    <button class="p-1 border shadow" @click="changePerson">改人</button>
  </div>
</template>
